<template>
  <div class="py-24 pr-24 bd-filt-6 bgc-lightgrey">
    <div class="pl-24">
      <div class="group-wrapper d-flex al-start">
        <el-radio-group v-model="model.data.activeIndex" class="d-flex pb-4" style="overflow: auto">
          <el-radio-button v-for="(item, i) in config.imgList" :key="i" :label="i">
            <span class="name">轮播图{{ i + 1 }}</span>
            <i v-show="config.imgList.length > 1" class="el-icon-error ml-6" @click="handleDeletePicture(i)" />
          </el-radio-button>
        </el-radio-group>
        <el-button class="ml-8" type="text" @click="handleAddPicture">
          <i class="el-icon-circle-plus-outline mr-4" />添加轮播图
        </el-button>
      </div>
      <div class="image-config-wrapper">
        <el-form-item
          ref="picture"
          label="上传图片"
          class="mb-24"
          :rules="{ ...notEmptyRules, message: '请上传图片' }"
          :prop="`componentData.${index}.config.imgList[${activeIndex}].imgSrc`"
        >
          <PictureMaterialSelector
            :img-url.sync="config.imgList[activeIndex].imgSrc"
            @success="() => $refs.picture.clearValidate()"
          ></PictureMaterialSelector>
        </el-form-item>
        <el-form-item label="拉伸方式">
          <el-radio-group v-model="config.imgList[activeIndex].objectFit">
            <el-radio label="contain">等比适应</el-radio>
            <el-radio label="cover">纵向平铺</el-radio>
          </el-radio-group>
        </el-form-item>
        <JumpSetting v-model="config.imgList[activeIndex]" />
      </div>
    </div>
    <div class="general-config-wrapper">
      <div class="d-flex al-center">
        <el-form-item label="切换方式">
          <el-select v-model="config.playType" class="play-selector" placeholder="请选择切换方式">
            <el-option
              v-for="item in playTypeSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="config.playType === 'auto'" label="切换时间">
          <el-input v-model="config.playDelay" placeholder="请输入">
            <div slot="suffix">秒</div>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item class="mt-24" label="位置尺寸">
        <LayoutSetting v-model="model" />
      </el-form-item>
      <BorderSetting v-model="model" class="mt-24" />
    </div>
  </div>
</template>

<script>
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';
  import { notEmptyRules } from '@/utils';

  export default {
    components: { PictureMaterialSelector, JumpSetting, LayoutSetting, BorderSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      },
      index: {
        type: [Number, String],
        default: undefined
      }
    },

    data() {
      return {
        notEmptyRules,
        playTypeSelectOptions: [
          {
            label: '自动切换',
            value: 'auto'
          },
          {
            label: '手动切换',
            value: 'manual'
          }
        ]
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      },
      activeIndex() {
        return this.model.data.activeIndex;
      },
      activeImg() {
        return this.config.imgList[this.activeIndex];
      }
    },

    methods: {
      handleAddPicture() {
        this.config.imgList.push({
          imgSrc: '',
          jump: false,
          jumpType: 0,
          url: '',
          objectFit: 'contain'
        });
      },

      handleDeletePicture(index) {
        this.config.imgList.splice(index, 1);
        if (!this.config.imgList[this.activeIndex]) {
          this.model.data.activeIndex -= 1;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .image-config-wrapper {
    margin-top: 16px;
    padding: 24px 24px 24px 0;
    background: #fff;

    ::v-deep {
      .el-input {
        width: 100%;
      }
    }
  }

  .general-config-wrapper {
    margin-top: 24px;

    .play-selector {
      width: 112px;
    }

    ::v-deep {
      .el-input {
        width: auto;
      }
    }
  }
</style>
